<template>
  <div>
    <div class="container">
      <div class="section section-menus">
        <div class="welcome-container">
          <div class="welcome">
            <div class="default-avatar">
              <img
                style="object-fit: cover; width: 100%; height: 100%; border-radius: 50%"
                src="~@/assets/images/default-avatar.png"
                alt
              />
            </div>
            <div class="welcome-content">
              <div>{{site_name}}，欢迎您</div>
              <div>
                今日新增订单：
                <span>{{ time_statistic.today_order.order_count }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="menus-container">
          <div class="menus">
            <div class="li" >
              <div class="li-box-shadow" @click="navgationMenu('/agent/order/list')">
                <img class="img" src="~@/assets/images/home/item3.png" alt />
                <div class="name">服务订单</div>
              </div>
            </div>
            <div class="li">
              <div class="li-box-shadow" @click="navgationMenu('agent_extract')">
                <img class="img" src="~@/assets/images/home/item4.png" alt />
                <div class="name">代理提现</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-info-1">
        <div class="left-container">
          <div class="realtime-info-container">
            <div class="realtime-info-header">
              <div class="title">
                <img src="~@/assets/images/home/realtime-text.png" alt="" />
                <span data-time="2023-05-04 12:58:53" class="up-datetime">更新于{{ time_statistic.now }}</span>
              </div>
            </div>
            <div class="realtime-info-content">
              <div class="info-box">
                <div class="li">
                  <img style="width: 12px; height: 12px" src="~@/assets/images/home/yuan.png" alt="" />
                  <span style="font-size: 14px; margin-right: 2px; margin-left: 2px;font-weight:900;">今日接单量</span>
                </div>
                <div class="li num">{{ time_statistic.today_order.order_count }}</div>
                <div class="li" style="font-size: 14px; color: #999">
                  <span>昨日：</span>
                  <span>{{ time_statistic.yesterday_order.order_count }}</span>
                  <span
                    class="iconfont-mxx mxx-yly_xiajiang"
                    style="color: #1cc851; font-size: 10px; transform: rotate(180deg)"
                    v-if="time_statistic.sub_order_day_count > 0"
                  ></span>
                  <span class="iconfont-mxx mxx-yly_xiajiang" style="color: #eb3733; font-size: 10px" v-else></span>
                  <span>{{ Math.abs(time_statistic.sub_order_day_count) }}</span>
                </div>
              </div>
              <div class="info-box">
                <div class="li">
                  <img style="width: 12px; height: 12px" src="~@/assets/images/home/yuan.png" alt="" />
                  <span style="font-size: 14px; margin-right: 2px; margin-left: 2px;font-weight:900">本月接单量</span>
                </div>
                <div class="li num">{{ time_statistic.now_month_order.order_count }}</div>
                <div class="li" style="font-size: 14px; color: #999">
                  <span>上月：</span>
                  <span>{{ time_statistic.last_month_order.order_count }}</span>
                  <span
                    class="iconfont-mxx mxx-yly_xiajiang"
                    style="color: #1cc851; font-size: 10px; transform: rotate(180deg)"
                    v-if="time_statistic.sub_order_month_count > 0"
                  ></span>
                  <span class="iconfont-mxx mxx-yly_xiajiang" style="color: #eb3733; font-size: 10px" v-else></span>
                  <span>{{ Math.abs(time_statistic.sub_order_month_count) }}</span>
                </div>
              </div>
              <div class="info-box">
                <div class="li">
                  <img style="width: 12px; height: 12px" src="~@/assets/images/home/yuan.png" alt="" />
                  <span style="font-size: 14px; margin-right: 2px; margin-left: 2px;font-weight:900">今日订单收入</span>
                </div>
                <div class="li num">{{ time_statistic.today_order.pay_price }}</div>
                <div class="li" style="font-size: 14px; color: #999">
                  <span>昨日：</span>
                  <span>{{ time_statistic.yesterday_order.pay_price }}</span>
                  <span
                    class="iconfont-mxx mxx-yly_xiajiang"
                    style="color: #1cc851; font-size: 10px; transform: rotate(180deg)"
                    v-if="time_statistic.sub_order_day_price > 0"
                  ></span>
                  <span class="iconfont-mxx mxx-yly_xiajiang" style="color: #eb3733; font-size: 10px" v-else></span>
                  <span>{{ Math.abs(time_statistic.sub_order_day_price) }}</span>
                </div>
              </div>
              <div class="info-box">
                <div class="li">
                  <img style="width: 12px; height: 12px" src="~@/assets/images/home/yuan.png" alt="" />
                  <span style="font-size: 14px; margin-right: 2px; margin-left: 2px;font-weight:900">本月订单收入</span>
                </div>
                <div class="li num">{{ time_statistic.now_month_order.pay_price }}</div>
                <div class="li" style="font-size: 14px; color: #999">
                  <span>上月：</span>
                  <span>{{ time_statistic.last_month_order.pay_price }}</span>
                  <span
                    class="iconfont-mxx mxx-yly_xiajiang"
                    style="color: #1cc851; font-size: 10px; transform: rotate(180deg)"
                    v-if="time_statistic.sub_order_month_price > 0"
                  ></span>
                  <span class="iconfont-mxx mxx-yly_xiajiang" style="color: #eb3733; font-size: 10px" v-else></span>
                  <span>{{ Math.abs(time_statistic.sub_order_month_price) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-container">
          <div class="service-rank-container">
            <div class="service-rank">
              <div class="rank-header">
                <div class="title">
                  <img src="~@/assets/images/home/shopTop.png" alt="" />
                  <span data-time="2023-05-04 12:58:53" class="up-datetime">更新于{{ time_statistic.now }}</span>
                </div>
                <div class="rank-type">
                  <button :class="rank_type == 'month' ? 'select-btn' : ''" @click="rankTypeChange('month')">
                    本月
                  </button>
                  <button :class="rank_type == 'lately30' ? 'select-btn' : ''" @click="rankTypeChange('lately30')">
                    近一月
                  </button>
                  <button :class="rank_type == 'lately180' ? 'select-btn' : ''" @click="rankTypeChange('lately180')">
                    近半年
                  </button>
                  <button :class="rank_type == 'year' ? 'select-btn' : ''" @click="rankTypeChange('year')">全年</button>
                </div>
              </div>

              <div class="rank-main" >
              <div id="ChartBar"  style="width: 100%; height: 100%"></div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--订单统计-->
    <service-chart ref="serviceChart" :now="time_statistic.now" />
  </div>
</template>

  <script>
import serviceChart from './components/serviceChart';
// import { auth } from '@/api/system'
// import { siteConfig } from '@/api/setting';
import * as echarts from 'echarts';

import { timeStatisticApi,companyRangeApi ,getSiteName} from '@/api/agent.js';

export default {
  name: 'index',
  components: {
    serviceChart,
  },
  data() {
    return {
      openImage: false,
      visitType: 'day', // day, month, year
      visitDate: [new Date(), new Date()],
      force_reminder: null,
      site_name: '',
      time_statistic: {
        today_order: { order_count: 0 },
        yesterday_order: { order_count: 0 },
        now_month_order: { order_count: 0 },
        last_month_order: { order_count: 0 },
      },
      extra_statistic: {},
      order_statistic: {},
      columns: [
        {
          title: '排名',
          slot: 'id',
          align: 'center',
          minWidth: 30,
        },
        {
          title: '服务名称',
          key: 'title',
          minWidth: 110,
        },
        {
          title: '价格',
          key: 'price',
          minWidth: 50,
        },
        {
          title: '分类',
          key: 'cate_title',
          minWidth: 50,
        },
        {
          title: '类型',
          slot: 'type',
          minWidth: 50,
        },
        {
          title: '下单数量',
          key: 'order_count',
          minWidth: 50,
        },
        {
          title: '总金额',
          key: 'pay_price',
          minWidth: 50,
        },
      ],
      rankData: [
        {
          id: 1,
        },
        {
          id: 2,
        },
        {
          id: 3,
        },
        {
          id: 4,
        },
        {
          id: 5,
        },
        {
          id: 6,
        },
      ],
      rank_type: 'month',
    };
  },
  mounted() {
    this.getSite();
    // //获取实时数据
    this.getOntime();
    // //获取额外数据
    this.getCompanyRange();
    // //获取订单数据
    // this.getOrderStatistic();
  },
  methods: {
    getOntime() {
      timeStatisticApi().then((res) => {
        let data = res;
        this.time_statistic = data;
      });
    },
    getOrderStatistic() {
      orderStatisticApi().then((res) => {
        let data = res;
        this.order_statistic = data;
      });
    },
    getSite() {
      getSiteName().then((res) => {
        console.log(res);
        this.site_name = res;
      });
    },
    getCompanyRange() {
      let data = {
        time: this.rank_type,
      };
      companyRangeApi(data).then((res) => {
        let data = res;
        this.BarChart(data);
      });
    },
    BarChart(params) {
      console.log(params);
      let that = this;
      let myChart2 = echarts.init(document.getElementById('ChartBar'));
      myChart2.setOption({
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '10%',
          left: '5%',
          bottom: '15%',
          right: '5%',
        },
        xAxis: {
          data: params['xAxis'],
          axisLabel: {
            color: '#86909C',
            fontSize: 12,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: 'value',
            max_count: params['max_count'],
            nameTextStyle: {
              color: '#999',
              fontSize: 14,
            },
            axisLabel: {
              color: '#999',
              fontSize: 12,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#eee',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: 'bar',
            barWidth: 20,
            data: params['data'],
            itemStyle: {
              normal: {
                color: '#468DFF',
              },
            },
          },
        ],
      });
    },
    clear() {
      this.openImage = false;
    },
    // 服务项目排行
    rankTypeChange(val) {
      this.rank_type = val;
      this.getCompanyRange();
    },
    navgationMenu(val) {
      this.$router.push(val);
    },
  },
};
</script>
  <style scoped lang="stylus">
  >>> .layout-container .layout-main {
    background-color: #f5f8fb;
  }

  /* table css */
  >>> .ivu-table-wrapper {
    height: 100%;
  }

  >>> .ivu-table-header thead tr th {
    padding: 0px;
    font-size: 12px;
  }

  >>> .ivu-table-header .ivu-table-cell {
    font-size: 12px;
    color: #999999;
    font-weight: bold;
    text-align: left;
  }

  >>> .ivu-table {
    background: transparent !important;
  }

  >>> .ivu-table th {
    background: transparent !important;
  }

  >>> .ivu-table td {
    background: transparent !important;
  }

  /* tabel css */
</style>
  <style lang="scss" scoped>
@import url('~@/assets/iconfont-mxx/iconfont.css');
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  margin-bottom: 15px;
  .section-menus {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    column-gap: 15px;
    .welcome-container {
      border-radius: 8px;
      padding: 2px;
      background: #ffffff;
      display: flex;
      align-items: stretch;
      .welcome {
        width: 100%;
        height: 100%;
        padding: 25px;
        padding-right: 50px;
        background: linear-gradient(162deg, rgb(236, 244, 254), #fff 53%);
        border-radius: 8px;
        display: flex;
        align-items: center;
        column-gap: 12px;
        .default-avatar {
          width: 60px;
          height: 60px;
          background: #fff;
          border-radius: 50%;
          padding: 2px;
          box-shadow: 0 0 11px 0px rgb(219, 222, 227, 40%);
        }
        .welcome-content div:first-child {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .welcome-content div:last-child {
          font-size: 12px;
          color: #999;
        }
        .welcome-content div span {
          color: #428bf4;
          font-weight: bold;
        }
      }
    }
    .menus-container {
      flex: 1;
      border-radius: 8px;
      padding: 2px;
      background: #ffffff;
      .menus {
        width: 100%;
        height: 100%;
        background: linear-gradient(162deg, #ecf4fe, #fff 20%);
        border-radius: 8px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        .li {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .li-box-shadow {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            row-gap: 10px;
            user-select: none;
            .img {
              width: 42px;
              height: 42px;
              transition: all 0.5s;
            }
          }
          .li-box-shadow:hover .img {
            width: 70px;
            height: 70px;
            transition: all 0.5s;
          }
          .name {
            font-size: 14px;
          }
        }
        .li .img {
          width: 42px;
          height: 42px;
          transition: all 0.5s;
        }
      }
    }
  }
  .section-info-1 {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 15px;
    .left-container {
      width: 100%;
      border-radius: 8px;
      padding: 2px;
      background-color: #fff;
      .realtime-info-container {
        width: 100%;
        background: linear-gradient(162deg, #ecf4fe, #fff 20%);
        border-radius: 8px;
        padding-bottom: 15px;
        height: 100%;
        display: flex;
        flex-direction: column;
        .realtime-info-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px;
          .title {
            display: flex;
            align-items: flex-end;
            img {
              height: 16px;
              object-fit: contain;
            }
          }
          .up-datetime {
            font-size: 12px;
            color: #999;
            padding-left: 4px;
            transform: translateY(4px);
          }
        }
        .realtime-info-content {
          flex: 1;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-column-gap: 15px;
          grid-row-gap: 15px;
          padding: 0px 15px;
          .info-box {
            padding: 10px;
            width: 100%;
            min-width: 194px;
            border-radius: 8px;
            background: linear-gradient(162deg, #ecf4fe, #fdfeff);
            display: flex;
            flex-direction: column;
            row-gap: 15px;
            padding: 10px;
            &:hover {
              outline: 1px solid #428bf4;
            }
            .li {
              display: flex;
              align-items: center;
            }
            .num {
              color: #428bf4;
              font-weight: bold;
              font-size: 20px;
            }
          }
        }
      }
    }
    .right-container {
      width: 100%;
      height: 100%;
      .service-rank-container {
        position: relative;
        width: 100%;
        background: #ffffff;
        padding: 2px;
        border-radius: 8px;
        height: 100%;
        .service-rank {
          width: 100%;
          background: linear-gradient(162deg, #ecf4fe, #fff 20%);
          border-radius: 8px;
          height: 100%;
          .rank-header {
            
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            .title {
              display: flex;
              align-items: flex-end;
              flex-wrap: wrap;
              gap: 4px;
              img {
                height: 16px;
                object-fit: contain;
              }
              .up-datetime {
                font-size: 12px;
                color: #999;
                transform: translateY(4px);
              }
            }
          }
          .rank-type {
            display: flex;
            column-gap: 5px;
            button {
              background: #fff;
              border: 1px solid #dcdcdc;
              padding: 1px 10px;
              color: #999;
              border-radius: 3px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              height: 18px;
              font-size: 10px;
              line-height: 18px;
              padding: 0;
              min-width: 60px;
              text-align: center;
            }
            .select-btn {
              border: 1px solid #428bf4;
              color: #428bf4;
            }
            button:hover {
              border: 1px solid #428bf4;
              color: #428bf4;
            }
          }
          .rank-main {
            height: 100%;

            padding-left: 6px;
          }
        }
      }
    }
  }
  @media screen and (max-width: 1279px) {
    .section-info-1 {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 15px;
    }
  }
  @media screen and (max-width: 1024px) {
    .section-menus {
      display: grid;
      grid-template-columns: 1fr;
      grid-row-gap: 15px;
      .menus-container {
        padding: 15px 0px;
      }
    }
  }
}
</style>
